# Checkbox

<Subtitle>An easily stylable checkbox component.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React checkbox component that is easy to customize."
/>

import { DemoCheckboxBasic } from './demos/hero';

<DemoCheckboxBasic />

## Usage guidelines

- **Form controls must have an accessible name**: The checkbox must have a meaningful label. Prefer using [`<Field>`](/react/components/field) to provide a visible text label and description, or use the `aria-label` attribute as an alternative. See the [forms guide](/react/handbook/forms) for more on building form controls.

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Checkbox } from '@base-ui-components/react/checkbox';

<Checkbox.Root>
  <Checkbox.Indicator />
</Checkbox.Root>;
```

## Examples

### Form integration

To use a single checkbox in a form, pass the checkbox's `name` to `<Field>` and use `<Field.Label>` to label the control.

```tsx title="Using Checkbox in a form"
<Form>
  <Field.Root name="stayLoggedIn">
    <Field.Label>
      <Checkbox.Root />
      Stay logged in for 7 days
    </Field.Label>
  </Field.Root>
</Form>
```

## API reference

<Reference component="Checkbox" parts="Root, Indicator" />
